<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>个人注册</title>
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div class="register py-container">
    <!--register-->
    <div class="registerArea">
      <div class="info">
        <form class="sui-form form-horizontal">
          <div class="control-group">
            <label class="control-label">用户名：</label>
            <div class="controls">
              <input type="text" class="input-xfat input-xlarge" placeholder="用户名" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">邮箱：</label>
            <div class="controls">
              <input type="text" class="input-xfat input-xlarge" placeholder="邮箱" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">登录密码：</label>
            <div class="controls">
              <input type="password" class="input-xfat input-xlarge" placeholder="设置登录密码" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">确认密码：</label>
            <div class="controls">
              <input type="password" class="input-xfat input-xlarge" placeholder="再次确认密码" />
            </div>
          </div>
          <div class="control-group">
            <span class="control-label">&nbsp;</span>
            <label class="controls">
              <input id="agree" name="m1" type="checkbox" checked />
              <span>同意协议并注册《品优购用户协议》</span>
            </label>
          </div>
          <div class="control-group">
            <span class="control-label"></span>
            <div class="controls btn-reg">
              <button id="registerBtn" class="sui-btn btn-block btn-xlarge btn-danger" href="#">
                完成注册
              </button>
            </div>
          </div>
        </form>
        <div class="clearfix"></div>
      </div>
    </div>

  </div>
  <script>
    let a1 = document.querySelector('#agree')
    let a2 = document.querySelector('#registerBtn')
    a1.addEventListener('click', function () {
      if (this.checked) {
        // 启用
        a2.disabled = false
      } else {
        // 禁用
        a2.disabled = true

      }
    })
  </script>
</body>

</html>